<script setup>
import {onMounted, ref} from "vue";
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {getGroupMember} from "@/api/group.js";
import {host_custom} from "@/host.js";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import emitter from "@/utils/EventBus.js";
import UserOnlineStatus from "@/components/UserOnlineStatus.vue";

const isReadyToShow = ref(false)
const route = useRoute()


const groupMembers = ref([])
const getGroupMembers = async (gid) => {
  const res = await getGroupMember(gid)
  if (res.status === 200) {
    groupMembers.value = res.data
    isReadyToShow.value = true
  } else {
    isReadyToShow.value = false
  }

}

onMounted(async ()=> {
  if (route.name === 'channel') {
    await getGroupMembers(route.params.groupId)
  }
})

onBeforeRouteUpdate(async (to, from, next)=>{
  if (route.params.groupId === to.params.groupId) {
    next()
    return false
  }
  isReadyToShow.value = false
  groupMembers.value.length = 0
  if (to.name === 'channel') {
    await getGroupMembers(to.params.groupId)
  }
  next()
})


const showMiniProfileCard = (id, event) => {
  event.stopPropagation()
  emitter.emit('showMiniProfileCard', {
    uid: id,
    boundingClientRect: event.currentTarget.getBoundingClientRect(),
  })
}

</script>

<template>
  <div id="groupMember" v-if="route.name === 'channel'" class="collapse collapse-horizontal">
    <p class="mb-2 ps-2 text-truncate" style="font-size: 12px"><b>群成员</b> {{groupMembers.length}} 位</p>
    <template v-if="isReadyToShow" v-for="item in groupMembers" :key="item.id">
      <div @click="showMiniProfileCard(item.id, $event)" class="d-flex align-items-center px-2 py-1 justify-content-between rounded-3 memberList">
        <div class="d-flex align-items-center overflow-hidden py-1">
          <div class="position-relative friendPfp">
            <img
                :src="host_custom + `/pfp/${item.avatar}`"
                alt="pfp"
                class="rounded-circle"
                width="32"
                height="32"
            />

            <user-online-status :uid="item.id"/>
          </div>
          <div class="ps-2 overflow-hidden" style="line-height: 20px">
            <p class="m-0 username text-truncate">{{ item.name }}</p>
          </div>
        </div>

        <font-awesome-icon v-if="item.roles ==='admin'" :icon="['fas', 'crown']" size="xs" />
      </div>
    </template>

    <template v-else>
      <div class="w-100 h-100 d-flex justify-content-center align-items-center">
        <div class="spinner-border text-primary" style="width: 2.5rem; height: 2.5rem" role="status"></div>
      </div>
    </template>
  </div>
</template>

<style scoped>
#groupMember {
  padding: 10px;
  overflow: hidden;
  width: 256px;
  -webkit-transition: none;
  transition: none;
  background-color: var(--myTabsColor);
}

.username {
  font-weight: 500
}

.memberList {
  transition: none;
  user-select: none;
}

.memberList:hover {
  background-color: var(--bs-tertiary-bg);
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bs-body-bg);
  padding: 2px;
  bottom: -3px;
  right: -3px;
  position: absolute;
}
</style>